<template>
	<div class="compass">
		<img :src="img" class="compass-label" :style="{'--rotation':`${rotation}deg`}" />
	</div>
</template>

<script>
const img = require("./compass-n.png");
export default {
	name: "compass",
	data() {
		return {
			img,
			rotation: 0
		};
	},
	mounted() {
		const { eventBus } = this.$parent;
		this.eventBus = eventBus;
		this.registerEvents();
	},
	beforeDestroy() {
		this.unregisterEvents();
	},
	methods: {
		registerEvents() {
			this?.eventBus?.on("scene-pre-render", this.changeDirection);
		},
		unregisterEvents() {
			this?.eventBus?.off("scene-pre-render", this.changeDirection);
		},
		changeDirection() {
			const { heading } = this.$parent.viewer.scene.camera;
			const newOne = -(heading * 180) / Math.PI;
			this.rotation = newOne;
		}
	}
};
</script>

<style lang="scss" scoped>
.compass {
	position: absolute;
	z-index: 100;
	width: 100px;
	height: 100px;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
}
.compass-label {
	width: 100%;
	height: 100%;
	transform: rotateZ(var(--rotation));
}
</style>